<template>
  <div>
    <a-card :bordered="false">
      <f-search-form :more="true" @searchHandler="searchHandler">
        <f-search-form-item label="状态" name="status"/>
        <f-search-form-item label="项目代码" name="projectCode"/>
        <f-search-form-item label="项目名称" name="projectName"/>
        <f-search-form-item label="专业代码" name="majorCode" slot="advanced"/>
        <f-search-form-item label="专业名称" name="majorName" slot="advanced"/>
        <f-search-form-item label="工程包代码" name="packageNo" slot="advanced"/>
        <f-search-form-item label="工程包名称" name="packageName" slot="advanced"/>
        <f-search-form-item label="冲销申请人" name="recDelAppBkUserName" slot="advanced"/>
      </f-search-form>
      <f-table ref="table" rowKey="recDecId" :columns="columns" :exportBtn="true" :multiple="false" :operator="operator"
               :params="queryParam"
               :api="api.recDeliBkReqConfRecord"
      >
        <!-- 状态标识 -->
        <a-tag v-if="syncStatus === '0'" color="geekblue" slot="syncStatus" slot-scope="syncStatus">
          {{ syncStatus | formatSyncStatusForCancel }}
        </a-tag>
        <a-tag v-else-if="syncStatus === '1'" color="geekblue" slot="syncStatus" slot-scope="syncStatus">
          {{ syncStatus | formatSyncStatusForCancel }}
        </a-tag>
        <a-tag v-else-if="syncStatus === '2'" color="green" slot="syncStatus" slot-scope="syncStatus">
          {{ syncStatus | formatSyncStatusForCancel }}
        </a-tag>
        <a-tag v-else-if="syncStatus === '3'" color="volcano" slot="syncStatus" slot-scope="syncStatus">
          {{ syncStatus | formatSyncStatusForCancel }}
        </a-tag>
        <a-tag v-else color="volcano" slot="syncStatus" slot-scope="syncStatus">
          {{ syncStatus | formatSyncStatusForCancel }}
        </a-tag>
        <span slot="createTime" slot-scope="createTime">
          {{ createTime | format }}
        </span>
      </f-table>
      <brdrb-drawer ref="drawer"></brdrb-drawer>
    </a-card>
  </div>
</template>
<script>
  import brdrbDrawer from './recDeliBkReqConfRecord_drawer.vue'
  import api from './js/api'
  import { formatDate, formatSyncStatusForCancel } from '../common/data'

  export default {
    name: 'TableList',
    components: {
      brdrbDrawer
    },
    data() {
      let me = this
      //操作按钮
      let operator = []
      // operator.push({
      //   name: '添加',
      //   icon: 'plus',
      //   that: this,
      //   handler: function(table, that) {
      //     that.$refs.drawer.showDrawer()
      //   }
      // })
      return {
        api: Object.assign(api, this.api),
        //列表初始化查询参数
        queryParam: {},
        // 表头
        columns: [
          {
            title: '状态',
            align: 'center',
            dataIndex: 'syncStatus',
            scopedSlots: { customRender: 'syncStatus' },
            sorter: (a, b) => a.syncStatus.length - b.syncStatus.length
          },
          {
            title: '项目代码',
            align: 'center',
            dataIndex: 'projectCode',
            sorter: (a, b) => a.projectCode.length - b.projectCode.length
          },
          {
            title: '项目名称',
            align: 'center',
            dataIndex: 'projectName',
            sorter: (a, b) => a.projectName.length - b.projectName.length
          },
          {
            title: '专业代码',
            align: 'center',
            dataIndex: 'majorCode',
            sorter: (a, b) => a.majorCode.length - b.majorCode.length
          },
          {
            title: '专业名称',
            align: 'center',
            dataIndex: 'majorName',
            sorter: (a, b) => a.majorName.length - b.majorName.length
          },
          {
            title: '工程包代码',
            align: 'center',
            dataIndex: 'packageNo',
            sorter: (a, b) => a.packageNo.length - b.packageNo.length
          },
          {
            title: '工程包名称',
            align: 'center',
            dataIndex: 'packageName',
            sorter: (a, b) => a.packageName.length - b.packageName.length
          },
          {
            title: '冲销申请人',
            align: 'center',
            dataIndex: 'recDelAppBkUserName',
            width: 100,
            sorter: (a, b) => a.recDelAppBkUserName.length - b.recDelAppBkUserName.length
          },
          {
            title: '冲销申请时间',
            align: 'center',
            dataIndex: 'createTime',
            scopedSlots: { customRender: 'createTime' },
            width: 100,
            sorter: (a, b) => a.createTime.length - b.createTime.length
          },
          {
            title: '本次冲销数量',
            align: 'center',
            dataIndex: 'charOffCount',
            width: 100,
            sorter: (a, b) => a.charOffCount.length - b.charOffCount.length
          }
        ],
        operator: operator
      }
    },
    created() {
    },
    filters: {
      format(time) {
        const date = new Date(time)
        return formatDate(date, 'yyyy-MM-dd')
      },
      formatSyncStatusForCancel(syncStatus) {
        return formatSyncStatusForCancel(syncStatus)
      }
    },
    methods: {}
  }
</script>
